<!--
 * @Author: tkp
 * @Date: 2024-11-04 11:17:33
-->
<template>
  <el-image :style="imgStyle" :src="imageUrl" :preview-src-list="imageUrlArr" :fit="fit" @load="loadImage"></el-image>
</template>

<script>
import { generatePresignedUrl } from '@/utils/api'
export default {
  props: {
    url: {
      type: String | File,
      default: ''
    },
    hasPreview: {
      type: Boolean,
      default: false
    },
    imgStyle: {
      type: String,
      default: () => {
        return ''
      }
    },
    fit: {
      type: String,
      default: () => {
        return 'cover'
      }
    },
    isLocal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imageUrl: '',
      imageUrlArr: []
    }
  },
  watch: {
    url: {
      handler() {
        this.initImage()
      },
      immediate: true
    }
  },
  mounted() {
    this.initImage()
  },
  methods: {
    loadImage(e) {
      this.$emit('loadImg', { width: e.target.naturalWidth || 0, height: e.target.naturalHeight || 0 })
    },
    initImage() {
      if (!this.isLocal) {
        generatePresignedUrl({ fileUrl: this.url }).then(res => {
          this.imageUrl = res.data || ''
          if (this.hasPreview) {
            this.imageUrlArr = [res.data]
          } else {
            this.imageUrlArr = []
          }
        })
      } else {
        this.imageUrl = URL.createObjectURL(this.url)
        if (this.hasPreview) {
          this.imageUrlArr = [this.imageUrl]
        } else {
          this.imageUrlArr = []
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped></style>
